<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-evenly;
            margin: 10px;
        }
        img{
            width: 120px;
            height: 80px;
        }
        #price{
            width: 110px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        h2{
            margin-bottom: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<script src="./vue3.js"></script>
<body>
    <h2 style="color:rgb(0, 12, 255);">购物车：</h2>
    <div id="box">
        全选/全不选<input type="checkbox" @change="handleAll" v-model="isAll" />
        <ul>
            <li v-for="(item,index) in produceList" key="item.id">
                <input type="checkbox" @change="handleCheckbox" v-model="checkboxList" :value="item" />
                <img :src="item.pic" />
                <div id="price">
                    <div>{{item.name}}</div>
                    <div style="color:green;">价格(元)：{{item.price}}</div>
                </div>
                <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        <span>{{item.number}}</span>
                        <button @click="item.number++" :disabled="item.number>=item.limit">+</button>
                </div>
                <div>
                    <button @click="handleDel(item.id,index)">删除</button>
                </div>
            </li>
        </ul>
        <div>总金额：{{sum()}}元</div>
        {{checkboxList}}
    </div>
    <script>
        let obj={
            data(){
                return{
                    isAll:false,
                    produceList:[
                        {
                            name:'商品1',
                            price:21,
                            number:1,
                            id:1,
                            limit:5,
                            pic:"https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2F1943754248_-308756426.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=bf76785438e85e9e66356be6f5f2f736"
                        },
                        {
                            name:'商品2',
                            price:23,
                            number:1,
                            id:2,
                            limit:10,
                            pic:"https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2F-513984580_423210574.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=f8e86c38d8489b1e35599941100e0dc3"
                        },
                        {
                            name:'商品3',
                            price:333,
                            number:1,
                            id:3,
                            limit:15,
                            pic:"https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2Ff9c66967d047811828908442ba9714b0.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=bfae30a6213e32f83e62fe4cd1e65d28"
                        }
                    ],
                    checkboxList:[]    
                }
            },
            methods:{
                sum(){
                    let res=0
                    this.checkboxList.forEach(item=>{
                        res+=item.price*item.number
                    })
                    return res
                },
                handleDel(id,index){
                   this.produceList.splice(index,1)
                   this.checkboxList=this.checkboxList.filter(item=>{
                    return item.id!==id
                   })
                   this.handleCheckbox()
                },
                handleAll(){
                    if(this.isAll){
                        this.checkboxList=this.produceList
                    }else{
                        this.checkboxList=[]
                    }
                }, 
                handleCheckbox(){
                    if(this.checkboxList.length===this.produceList.length){
                       this.isAll=true 
                    }else{
                       this.isAll=false
                    }    
                }
            }
        }
       let vm= Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>